<template>
  <v-container fill-height fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="10" md="11">
        <v-textarea
          clearable
          clear-icon="mdi-close-circle"
          label="请输入Html字符"
          v-model="htmlstr"
          rows="8"
          @input="handleInput"
        ></v-textarea>
      </v-col>
    </v-row>
  </v-container>

  <div class="container">
    <div
      style="width: 99%"
      v-html="sanitizeHtml(htmlstr)"
      :class="{ 'green-border': isInputValid }"
    ></div>
  </div>
</template>

<script>
import DOMPurify from "dompurify";

export default {
  data() {
    return {
      htmlstr: "",
      isInputValid: false,
    };
  },
  computed: {},
  methods: {
    handleInput() {
      // 执行您想要在输入完成后执行的函数
      // 在这里可以调用您的函数或触发其他操作
      this.myFunction();
    },
    myFunction() {
      // 在这里编写您想要执行的函数逻辑
      this.isInputValid = this.htmlstr.length > 0;
    },
    sanitizeHtml(html) {
      return DOMPurify.sanitize(html);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  padding-bottom: 5%;
  padding-top: 5%;
  padding-left: 5%;
  padding-right: 5%;
  overflow-x: auto; /* 启用横向滚动条 */
  white-space: nowrap; /* 防止内容换行 */
  width: 100%;
}
.containertext {
  width: 70%; /* 设置宽度为 70% */
}
.green-border {
  border: 3px solid green;
}
</style>
